<template>
  <div class="searchbox">
    <el-input
      v-model="value"
      size="large"
      placeholder="输入项目关键词进行搜索"
      :prefix-icon="Search"
      class="inputbox"
      @change="transValue"
    >
      <template #append>
        <el-button color="#2769dc" @click="clicksearch">搜一下</el-button>
      </template>
    </el-input>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
const emit = defineEmits(["getValue", "mysearch"]);
const value = ref("");
const transValue = () => {
  emit("getValue", value.value);
};

const clicksearch = () => {
  emit("mysearch", value.value);
};
</script>

<style lang="scss" scoped>
@mixin flex {
  display: flex;
  align-items: center;
}

.searchbox {
  background: url("../../assets/成果/banner.png") no-repeat;
  width: 100%;
  height: 350px;
  background-size: 100% 100%;
  @include flex();
  justify-content: center;
  align-items: flex-start;
  padding-top: 92px;

  .inputbox {
    width: 596px;
    height: 64px;
    input {
      background-color: rgba(0, 0, 0, 0);
      border: none;
      color: #fff;
      font-size: 20px;
    }
    :deep(.el-icon) {
      font-size: 21px;
      margin-left: 15px;
    }

    :deep(.el-input-group__append) {
      .el-button {
        background: #2769dc;
        border: none;
        height: 64px;
        border-radius: 0;
        width: 100px;
        color: #fff;
        font-size: 20px;
        font-weight: 700;
      }
    }
    ::-webkit-input-placeholder {
      font-size: 16px;
    }

    ::-moz-placeholder {
      font-size: 16px;
    }

    :-ms-input-placeholder {
      font-size: 16px;
    }

    ::placeholder {
      font-size: 16px;
    }
  }
}
</style>
